<template>
  <div class="mt-8">
    <h4 class="font-medium text-gray-800 mb-4">价格区间</h4>
    <div class="space-y-2">
      <label class="flex items-center cursor-pointer">
        <input
          type="checkbox"
          class="form-checkbox h-4 w-4 text-primary rounded border-gray-300"
          v-model="localRanges"
          :value="'0-10'"
        />
        <span class="ml-2 text-gray-700">10万以下</span>
      </label>
      <label class="flex items-center cursor-pointer">
        <input
          type="checkbox"
          class="form-checkbox h-4 w-4 text-primary rounded border-gray-300"
          v-model="localRanges"
          :value="'10-50'"
        />
        <span class="ml-2 text-gray-700">10-50万</span>
      </label>
      <label class="flex items-center cursor-pointer">
        <input
          type="checkbox"
          class="form-checkbox h-4 w-4 text-primary rounded border-gray-300"
          v-model="localRanges"
          :value="'50-100'"
        />
        <span class="ml-2 text-gray-700">50-100万</span>
      </label>
      <label class="flex items-center cursor-pointer">
        <input
          type="checkbox"
          class="form-checkbox h-4 w-4 text-primary rounded border-gray-300"
          v-model="localRanges"
          :value="'100-500'"
        />
        <span class="ml-2 text-gray-700">100-500万</span>
      </label>
      <label class="flex items-center cursor-pointer">
        <input
          type="checkbox"
          class="form-checkbox h-4 w-4 text-primary rounded border-gray-300"
          v-model="localRanges"
          :value="'500+'"
        />
        <span class="ml-2 text-gray-700">500万以上</span>
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, ref, watch } from 'vue'

// 定义props
const props = defineProps<{
  selectedRanges: string[]
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'range-change', ranges: string[]): void
}>()

// 本地状态
const localRanges = ref<string[]>([...props.selectedRanges])

// 监听变化并 emit 事件
watch(localRanges, (newVal) => {
  emit('range-change', newVal)
})

// 监听 prop 变化更新本地状态
watch(
  () => props.selectedRanges,
  (newVal) => {
    localRanges.value = [...newVal]
  }
)
</script>

<style scoped>
.text-primary {
  color: var(--primary);
}
</style>
